import React,{Component} from 'react';
import './search.css';
import HotSearch from '../hotSearch/hotSearch';
export default class Search extends Component {
    constructor(){
        super();
        this.state={
            val:''
        };
    }
    clearTxt=()=>{
        this.setState({
            val:''
        })
    }
    searchChange=(e)=>{
        this.setState({
            val:e.target.value
        });
    }
    selectHot=(val)=>{
        this.setState({
            val: val
        })
    }
    render(){
        return (
            <div className='search-box'>
                <div className='search-con clear'>
                    <i className='iconfont'>&#xe627;</i>
                    <input autoFocus id='search-txt' value={this.state.val} onChange={this.searchChange} type='search' placholder='搜索歌曲、歌手、专辑'/>
                    <label className='iconfont' htmlFor='search-txt' onClick={this.clearTxt}>&#xe632;</label>
                </div>
                <hr/>
                <HotSearch selectHot={this.selectHot}/>
            </div>
        )
    }
}